<template>
    <div id="content">
        <Header />
        <div class="banner">
            <div v-if="lang == 'zh'" class="pay-center-top-content-left"></div>
            <div v-if="lang == 'en'" class="pay-center-top-content-left_en"></div>
            <div class="pay-center-top-content-right"></div>
        </div>
        <div class="content_main">
            <div class="recharge_content">
                <div class="recharge_content_left">
                    <span class="recharge-title">{{ $t('recharge_center') }}</span>
                    <ul id="ser-ul" class="security-ul">
                        <li :class="{ active: $route.path === '/recharge' }" class="recharge-list on" @click="$router.push('/recharge')">
                            <p>
                                <svg t="1718707178584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5183" width="20"><path d="M512 750.51c-19.08 0-31.801-12.721-31.801-31.802V432.497c0-19.08 12.72-31.801 31.801-31.801s31.801 12.72 31.801 31.8v286.212c-6.36 19.08-19.08 31.801-31.801 31.801z" p-id="5184" fill="#707070"></path><path d="M651.925 534.26h-286.21c-19.081 0-31.802-12.72-31.802-31.8 0-19.081 12.72-31.802 31.801-31.802h286.211c19.081 0 31.802 12.72 31.802 31.802 0 19.08-12.72 31.8-31.802 31.8zM651.925 648.745h-286.21c-19.081 0-31.802-12.72-31.802-31.8 0-19.082 12.72-31.802 31.801-31.802h286.211c19.081 0 31.802 12.72 31.802 31.801 0 19.08-12.72 31.801-31.802 31.801zM512 464.298c-6.36 0-19.08 0-25.441-6.36L352.994 324.373c-12.72-12.72-12.72-31.802 0-44.522 12.72-12.72 31.801-12.72 44.522 0L531.08 413.416c12.72 12.72 12.72 31.801 0 44.522-6.36 6.36-12.72 6.36-19.081 6.36z" p-id="5185" fill="#707070"></path><path d="M512 464.298c-6.36 0-19.08 0-25.441-6.36-12.72-12.72-12.72-31.801 0-44.522l133.565-133.565c12.72-12.72 31.801-12.72 44.522 0 12.72 12.72 12.72 31.801 0 44.522L531.081 457.938c-6.36 6.36-12.72 6.36-19.081 6.36z" p-id="5186" fill="#707070"></path><path d="M512 1017.64c-279.85 0-508.82-228.97-508.82-508.82S232.15 0 512 0s508.82 228.969 508.82 508.82c0 25.44 0 50.882-6.36 82.683 0 19.08-19.081 31.801-38.162 25.441-19.08 0-31.801-19.08-25.44-38.161 6.36-25.441 6.36-44.522 6.36-69.963C957.217 260.77 760.05 63.602 512 63.602S66.783 267.13 66.783 515.18 263.95 960.398 512 960.398c25.441 0 57.242 0 82.683-6.36 19.081-6.361 31.801 6.36 38.162 25.44 6.36 19.081-6.36 31.802-25.441 38.162H512z" p-id="5187" fill="#707070"></path><path d="M989.019 864.994H671.006c-19.08 0-31.801-12.72-31.801-31.801s12.72-31.802 31.801-31.802H989.02c19.08 0 31.8 12.72 31.8 31.802s-19.08 31.8-31.8 31.8z" p-id="5188" fill="#707070"></path><path d="M830.012 1024c-19.08 0-31.8-12.72-31.8-31.801V674.186c0-19.08 12.72-31.8 31.8-31.8s31.802 12.72 31.802 31.8V992.2c0 12.72-19.081 31.801-31.802 31.801z" p-id="5189" fill="#707070"></path></svg>
                            </p>
                            <span class="recharge-nav-name">{{ $t('Recharge_Y_coins') }}</span>
                        </li>
                        <!-- <li :class="{ active: $route.path === '/recharge/gameRecharge' }" class="recharge-list on" @click="$router.push('/recharge/gameRecharge')">
                            <p>
                                <svg style="top: 2px;" t="1735122966640" class="icon" viewBox="0 0 1435 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4298" width="20"><path d="M1271.616068 1023.959793c-98.713217 0-153.119386-57.215699-216.409745-123.467454l-0.379666-0.417633c-21.185375-22.210474-43.130083-45.18028-68.339919-67.846353-64.239524-57.367566-129.466181-65.264623-190.326676-65.264623-11.389987 0-22.096574 0.265766-32.575362 0.493566s-20.691809 0.493566-30.373297 0.493566h-30.752964c-9.643522 0-19.704677-0.2278-30.031598-0.493566s-21.603008-0.493566-32.879095-0.493566c-60.746595 0-126.087151 7.897057-190.326675 65.264623-25.437637 22.779973-47.344378 45.559946-68.56772 67.88432l-0.379666 0.379666c-63.176459 66.251755-117.696528 123.467455-216.409745 123.467454a129.504147 129.504147 0 0 1-100.421715-44.231114c-62.682893-70.010451-78.439041-224.458669-49.356608-485.972761C54.330236 129.769914 223.623403 0.189833 368.655899 0.189833c54.102436 0 90.056827 21.565041 128.099382 44.420948 48.21761 28.930566 102.889545 61.733727 221.117606 61.733727s172.899996-32.803161 221.117606-61.733727c37.966622-22.779973 73.996946-44.420948 128.137349-44.420948 144.994529 0 314.287696 129.69398 354.570283 493.566085 28.930566 261.590025 13.174418 416.038243-49.356609 485.972761a129.504147 129.504147 0 0 1-100.725448 44.231114z m-475.569906-332.663541c72.136582 0 157.333681 10.023188 240.74635 84.475734 27.791567 24.830171 50.875273 49.014909 73.199647 72.402348 55.431268 58.088932 95.448088 100.080015 161.585943 100.080015a55.203468 55.203468 0 0 0 44.041281-18.983311c46.015546-51.368839 56.3045-195.11047 30.639064-427.238396-34.739459-314.287696-167.053136-426.289231-279.282471-426.289231-33.144861 0-57.861132 14.844949-89.145628 33.638427-53.874637 32.309595-120.885724 72.516248-260.07136 72.516248s-206.196724-40.206653-260.071361-72.516248c-31.322463-18.793478-56.038734-33.638427-89.183595-33.638427-112.229334 0-244.543012 112.001535-279.28247 426.289231-25.665436 232.127926-15.186649 375.869557 30.639063 427.238396a55.924834 55.924834 0 0 0 44.041282 18.983311c66.137855 0 106.306541-41.763284 161.51001-100.004082 22.36234-23.425406 45.559946-47.686077 73.27558-72.478281 83.526568-74.414579 169.141301-84.437767 242.037215-84.437767 11.389987 0 22.324374 0.2278 33.448594 0.493566 9.947255 0.2278 19.287044 0.455599 28.2092 0.455599h30.752963c8.922156 0 18.186012-0.2278 28.019367-0.455599s22.400307-0.531533 34.891326-0.531533z" p-id="4299" fill="#707070"></path><path d="M1138.960691 305.82114a67.99822 67.99822 0 1 1-67.99822-67.99822 67.99822 67.99822 0 0 1 67.99822 67.99822z m0 0M1138.960691 577.814019a67.99822 67.99822 0 1 1-67.99822-67.99822 67.99822 67.99822 0 0 1 67.99822 67.99822z m0 0M1206.958911 509.815799a67.99822 67.99822 0 1 1 67.99822-67.99822 67.99822 67.99822 0 0 1-67.99822 67.99822z m0 0M935.041965 509.815799a67.99822 67.99822 0 1 1 67.99822-67.99822 67.99822 67.99822 0 0 1-67.99822 67.99822z m0 0M542.087428 396.485433h-113.330367V283.155066a45.332147 45.332147 0 1 0-90.664293 0v113.330367H224.762402a45.332147 45.332147 0 1 0 0 90.664293h113.330366v113.330366a45.332147 45.332147 0 0 0 90.664293 0v-113.330366h113.330367a45.332147 45.332147 0 1 0 0-90.664293z m0 0" p-id="4300" fill="#707070"></path></svg>
                            </p>
                            <span class="recharge-nav-name">{{ $t('game_recharge') }}</span>
                        </li> -->
                        <li :class="{ active: $route.path === '/recharge/svip' }"  class="recharge-list on" @click="$router.push('/recharge/svip')">
                            <p>
                                <svg t="1718707567259" class="icon" viewBox="0 0 1725 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6597" width="35"><path d="M869.9923243 1024C587.7086453 1024 357.9923243 794.28368 357.9923243 512S587.7086453 0 869.9923243 0 1381.9923243 229.71632 1381.9923243 512 1152.2760043 1024 869.9923243 1024z m0-981.459941C611.1056773 42.540059 400.5323833 253.113353 400.5323833 512S611.1056773 981.459941 869.9923243 981.459941 1339.4522653 770.886647 1339.4522653 512 1128.8789713 42.540059 869.9923243 42.540059z" p-id="6598" fill="#707070"></path><path d="M1135.2599803 468.24451l-72.621959-139.166765c-5.469436-9.115727-15.192878-14.889021-25.827893-15.496736H703.7822353c-10.635015 0.607715-20.358457 6.381009-26.131751 15.496736l-72.621958 136.735905c-4.557864 9.723442-3.646291 20.966172 2.127003 30.081899l248.555489 312.669436c0.911573 1.519288 2.430861 3.038576 4.254006 4.254006 2.127003 1.21543 4.557864 1.823145 6.684867 1.823145 4.557864 0 8.811869-2.430861 11.24273-6.077151l21.27003-24.308605 232.754896-285.626113c6.381009-9.115727 7.596439-20.358457 3.342433-30.385757z m-182.618398 15.192879L867.2576063 697.656973 781.2659153 483.437389h171.375667z m-308.41543 0h99.361424l96.930564 245.820771-196.291988-245.820771z m187.480119-133.089615L765.4653213 440.289614 728.0908403 350.347774h103.615431zM797.3703663 446.366766l71.10267-95.107419 71.102671 95.107419H797.3703663z m208.142433-96.018992L969.6576063 437.554896l-64.417804-87.510979c0.303858 0.303858 100.272997 0.303858 100.272997 0.303857z m-13.369733 133.089615h104.83086l-203.584569 248.859347 98.753709-248.859347z m13.977448-37.070623l33.120475-81.433828 41.628486 81.433828h-74.748961z m-349.132344 0l41.324629-77.787538 30.689614 77.787538H656.9881703z" p-id="6599" fill="#707070"></path></svg>
                            </p>
                            <span class="recharge-nav-name">SVIP</span>
                        </li>
                        <li :class="{ active: $route.path === '/recharge/rechargeRecords' }"  class="recharge-list on" @click="$router.push('/recharge/rechargeRecords')">
                            <p>
                                <svg t="1718708227451" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8264" width="20" height="20"><path d="M534.368 770.592v-54.144c23.424-3.424 59.36-14.176 77.92-32.416 18.56-18.208 27.968-43.104 27.968-74.656 0-31.936-8.928-56.64-27.072-74.144-18.112-17.472-46.432-33.12-85.024-46.912-25.472-8.992-42.816-18.144-52.16-27.584-9.28-9.408-14.016-22.048-14.016-37.824 0-16.832 4.48-30.08 13.472-39.648s22.784-14.432 41.44-14.432c17.952 0 31.84 6.976 41.728 19.808 9.824 12.768 14.784 30.752 14.784 54.144h65.12c0-46.816-11.584-65.792-28.576-87.04-16.896-21.248-28.8-34.688-75.616-39.392V255.488h-46.816v60.32c-23.424 3.808-51.264 15.04-69.088 33.792-17.888 18.752-24.288 43.36-24.288 73.856 0 32.096 10.528 57.024 29.088 74.784s47.776 33.216 86.368 46.304c23.872 8.416 40.928 17.504 50.592 27.296s14.688 22.464 14.688 38.08c0 17.056-5.28 30.336-16.064 39.84s-26.272 14.272-46.528 14.272c-19.008 0-34.624-10.176-46.944-20.864-12.256-10.624-18.368-12.992-18.368-59.808h-65.376c0 46.816 7.936 74.4 28.448 94.048 20.544 19.584 54.048 36 77.472 39.392v53.888h46.816zM941.792 166.048l-140.96-42.912c-7.136-2.144-15.84-0.832-21.792 3.584s-10.528 11.392-10.528 18.816v109.952h-93.664V104.8c0-10.72-4.032-20.096-14.432-22.72l-144.096-36.608a19.968 19.968 0 0 0-10.624 0l-143.328 36.608c-10.4 2.624-15.296 12-15.296 22.72v150.688H253.408V145.536c0-7.424-3.296-14.432-9.248-18.816s-13.504-5.696-20.608-3.584L82.624 166.048a23.36 23.36 0 0 0-16.512 23.712l36.736 649.28a23.424 23.424 0 0 0 16.416 21.024l385.984 120.224a23.872 23.872 0 0 0 13.984 0l385.952-120.224a23.392 23.392 0 0 0 16.384-21.024l2.496-44.224c0.032-0.288 0.16-0.48 0.16-0.768a23.424 23.424 0 0 0-46.848 0h-0.16l-1.472 26.144-363.52 113.248-363.552-113.248L113.664 205.504l92.896-28.352v92.64c0 12.96 10.944 32.544 23.904 32.544h136.032c12.928 0 27.36-19.584 27.36-32.544V123.072l117.088-30.72 117.088 30.72v146.72c0 12.96 16.992 32.544 29.92 32.544h136.064c12.96 0 21.344-19.584 21.344-32.544V177.152l94.144 28.352-25.632 470.72c0 0.288-0.128 0.48-0.128 0.768a23.424 23.424 0 0 0 46.848 0h0.224l27.616-487.2a23.392 23.392 0 0 0-16.576-23.712z" p-id="8265" fill="#707070"></path></svg>
                            </p>
                            <span class="recharge-nav-name">{{ $t('Stored_record') }}</span>
                        </li>
                        <li :class="{ active: $route.path === '/recharge/economical' }" class="recharge-list on" @click="$router.push('/recharge/economical')">
                            <p>
                                <svg style="top:6px" t="1718708264247" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9529" width="25"><path d="M202.667 138.667h618.666c64.802 0 117.334 52.532 117.334 117.333v512c0 64.801-52.532 117.333-117.334 117.333H202.667c-64.802 0-117.334-52.532-117.334-117.333V256c0-64.801 52.532-117.333 117.334-117.333z m0 64c-29.456 0-53.334 23.878-53.334 53.333v512c0 29.455 23.878 53.333 53.334 53.333h618.666c29.456 0 53.334-23.878 53.334-53.333V256c0-29.455-23.878-53.333-53.334-53.333H202.667z m282.666 362.666v-42.666h-80c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h47.235l-71.818-86.181c-11.314-13.577-9.48-33.755 4.097-45.07 13.577-11.313 33.755-9.479 45.07 4.098l82.083 98.5 82.084-98.5c11.314-13.577 31.492-15.411 45.069-4.097 13.576 11.314 15.41 31.492 4.097 45.069l-71.818 86.18h47.235c17.673 0 32 14.328 32 32 0 17.674-14.327 32-32 32h-69.334v42.667h69.334c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32h-69.334V672c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32v-42.667h-80c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h80z" fill="#707070" p-id="9530"></path></svg>
                            </p>
                            <span class="recharge-nav-name">{{ $t('Money_card') }}</span>
                        </li>
                        <li :class="{ active: $route.path === '/recharge/collectionRecord' }" class="recharge-list on" @click="$router.push('/recharge/collectionRecord')">
                            <p>
                                <svg t="1723104448635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4315" width="25" height="25"><path d="M447.898 192.069h128.204c17.722 0 32.055-14.317 32.055-32.005 0-17.682-14.333-31.999-32.055-31.999H447.898c-17.716 0-32.049 14.317-32.049 31.999 0 17.688 14.333 32.005 32.049 32.005z m416.672-64.071h-63.415c-17.722 0-32.049 14.311-32.049 31.999s14.328 31.993 32.049 31.993h63.415c17.654 0 32.055 14.35 32.055 32.01v95.565h-0.067l-769.171 1.004V224c0-17.66 14.389-32.01 32.049-32.01h65.417c17.716 0 32.049-14.305 32.049-31.993s-14.333-31.999-32.049-31.999h-65.417c-53.025 0-96.16 43.062-96.16 96.003v640.003c0 52.941 43.135 95.997 96.16 95.997H864.57c53.025 0 96.154-43.056 96.154-95.997V224c0-52.94-43.129-96.002-96.154-96.002z m32.055 736.005c0 17.654-14.401 31.993-32.055 31.993H159.436c-17.66 0-32.049-14.339-32.049-31.993V384.562h0.056l769.182-0.999v480.44zM673.4 255.994h0.309c17.363-0.185 31.287-14.642 31.101-32.319l-1.285-127.912c-0.185-17.677-16.14-33.385-31.719-31.629-17.351 0.185-31.281 14.642-31.09 32.319l1.285 127.912c0.18 17.52 14.233 31.629 31.399 31.629z m-321.011 0h0.303c17.357-0.185 31.287-14.642 31.107-32.319l-1.296-127.912c-0.18-17.677-16.123-33.385-31.707-31.629-17.357 0.185-31.287 14.642-31.107 32.319l1.296 127.912c0.179 17.52 14.227 31.629 31.404 31.629zM255.59 576.567h0.062l512.82-0.999c17.722-0.039 32.055-14.378 31.993-32.061-0.062-17.66-14.395-31.943-32.049-31.943h-0.062l-512.826 0.993c-17.722 0.034-32.055 14.384-31.993 32.072 0.067 17.655 14.401 31.938 32.055 31.938z m0 191.882h0.062l512.82-1.01c17.722-0.034 32.055-14.373 31.993-32.055-0.062-17.666-14.395-31.943-32.049-31.943h-0.062l-512.826 0.999c-17.722 0.034-32.055 14.373-31.993 32.066 0.067 17.655 14.401 31.943 32.055 31.943z" fill="#707070" p-id="4316"></path></svg>
                            </p>
                            <span class="recharge-nav-name">{{ $t('Money_card_record') }}</span>
                        </li>
                        <li :class="{ active: $route.path === '/recharge/coupon' }"  @click="$router.push('/recharge/coupon')" class="recharge-list on">
                            <p>
                                <svg style="top:7px" t="1718708357123" class="icon" viewBox="0 0 1038 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10754" width="25"><path d="M685.785022 282.254455c-4.773723-4.948709-11.462053-8.03807-18.881023-8.03807s-14.104229 3.090385-18.877953 8.03807l-0.025583 0-125.058251 125.056204L398.952294 283.324834l-0.918929-0.919952-0.151449-0.149403-0.014326 0c-4.693906-4.39203-10.981099-7.099698-17.916045-7.099698-6.933923 0-13.223163 2.707668-17.916045 7.099698-5.118578 4.79112-8.335852 11.586896-8.335852 19.151176 0 7.384178 3.058662 14.044878 7.965415 18.814508l95.624894 95.689363-55.348586 0c-14.498202 0-26.253944 11.752672-26.253944 26.251897 0 14.497179 11.754718 26.250874 26.253944 26.250874l94.750991 0c0 0.038886-0.005117 0.077771-0.005117 0.116657l0 78.713736-94.745874 0c-14.498202 0-26.253944 11.755742-26.253944 26.250874 0 14.500249 11.754718 26.251897 26.253944 26.251897l94.745874 0 0 126.798894c0 14.499226 11.753695 26.249851 26.253944 26.249851s26.251897-11.750625 26.251897-26.249851L549.193087 599.745437l94.744851 0c14.498202 0 26.251897-11.751648 26.251897-26.251897 0-14.495132-11.753695-26.250874-26.251897-26.250874l-94.744851 0 0-78.713736c0-0.038886-0.00614-0.077771-0.008186-0.116657l94.753037 0c14.498202 0 26.251897-11.752672 26.251897-26.250874 0-14.498202-11.753695-26.251897-26.251897-26.251897l-55.343469 0 97.134271-97.165993c0 0 0 0.001023-0.002047 0.00307 4.591575-4.728698 7.429203-11.167341 7.429203-18.278295C693.15692 293.38905 690.341804 286.977014 685.785022 282.254455z" fill="#707070" p-id="10755"></path><path d="M974.030935 637.227096c-1.416256-5.172813-2.182712-10.611685-2.171456-16.232706 0.023536-11.672854 3.338025-22.567995 9.052167-31.82073 2.515287-4.074805 5.493108-7.832386 8.867972-11.19497l-0.001023 0c1.769296-1.763157 3.475148-3.586688 5.120624-5.465478 16.845667-19.225877 27.079752-44.392046 27.133987-71.960938-0.054235-27.567869-10.288321-52.736085-27.133987-71.960938-1.644453-1.87879-3.351328-3.703345-5.120624-5.465478l0.001023 0c-3.374864-3.361561-6.352685-7.120165-8.867972-11.19497-5.714142-9.252735-9.027607-20.146852-9.052167-31.818683-0.011256-5.622044 0.7552-11.06194 2.171456-16.23373 2.818185-10.292414 8.255011-19.504216 15.57472-26.853601 19.791765-19.871583 31.999808-47.292096 31.939433-77.555353-0.053212-25.584702-13.216-121.188106-96.67276-121.188106l-8.026814 0L511.151679 138.281413 105.457844 138.281413l-8.026814 0c-83.45676 0-96.620571 95.603405-96.67276 121.188106-0.060375 30.263258 12.148691 57.682747 31.939433 77.555353 7.318686 7.349385 12.755512 16.561188 15.573697 26.853601 1.416256 5.17179 2.182712 10.611685 2.171456 16.23373-0.023536 11.672854-3.337002 22.566972-9.052167 31.818683-2.515287 4.074805-5.492084 7.833409-8.867972 11.19497l0.001023 0c-1.769296 1.762133-3.475148 3.586688-5.120624 5.465478-16.844643 19.224854-27.078729 44.392046-27.133987 71.960938 0.055259 27.568892 10.288321 52.735062 27.133987 71.960938 1.645476 1.87879 3.351328 3.702322 5.120624 5.465478L32.523741 577.97869c3.374864 3.362584 6.352685 7.120165 8.867972 11.19497 5.715165 9.252735 9.027607 20.146852 9.052167 31.82073 0.011256 5.621021-0.7552 11.060917-2.171456 16.232706-2.818185 10.29139-8.255011 19.505239-15.573697 26.851555-19.791765 19.872606-31.999808 47.292096-31.939433 77.55433 0.052189 25.585725 13.216 121.190153 96.67276 121.190153l8.026814 0 405.694859 0 405.693836 0 8.026814 0c83.45676 0 96.619548-95.604428 96.67276-121.190153 0.061398-30.262234-12.147668-57.681724-31.939433-77.55433C982.286969 656.732335 976.84912 647.518486 974.030935 637.227096zM920.302243 809.611212 511.151679 809.611212 102.288664 809.611212c-11.323906 0-47.952128-7.366781-47.952128-68.074422-0.007163-3.38305 0.275269-6.696516 0.799202-9.930163 2.079358-12.8384 8.16189-24.337291 16.945951-33.157167 2.034333-2.042519 3.984754-4.169973 5.853311-6.368034 12.568247-14.774495 21.280676-32.921807 24.593118-52.892651 0.988514-5.950526 1.50426-12.060687 1.49198-18.293645-0.058328-28.348652-10.872628-54.160527-28.575826-73.583902-1.195222-1.310855-2.421142-2.593058-3.676739-3.845585-11.018961-10.972912-17.856693-26.142403-17.916045-42.914392 0.060375-16.771989 6.897084-31.94148 17.916045-42.913369l0-0.001023c1.25662-1.251503 2.481518-2.534729 3.676739-3.845585 17.703197-19.422352 28.517497-45.235251 28.575826-73.582879 0.013303-6.233981-0.503467-12.343119-1.49198-18.293645-3.312442-19.970844-12.024871-38.118156-24.593118-52.892651-1.86958-2.197038-3.818979-4.324492-5.853311-6.368034-8.78406-8.819876-14.866592-20.318768-16.945951-33.157167-0.524956-3.233648-0.806365-6.547113-0.799202-9.930163 0-60.708664 36.628222-68.033489 47.952128-68.033489l408.863015 0 409.150564 0c11.322883 0 47.952128 7.325849 47.952128 68.033489 0.008186 3.382027-0.275269 6.696516-0.798179 9.930163-2.080382 12.837376-8.162914 24.337291-16.947997 33.157167-2.033309 2.043542-3.983731 4.169973-5.853311 6.368034-12.568247 14.774495-21.280676 32.921807-24.593118 52.892651-0.988514 5.950526-1.50426 12.060687-1.490957 18.293645 0.058328 28.348652 10.871605 54.160527 28.575826 73.582879 1.195222 1.310855 2.421142 2.594081 3.676739 3.845585l0 0.001023c11.019984 10.971889 17.85567 26.14138 17.916045 42.913369-0.060375 16.771989-6.89606 31.94148-17.916045 42.914392-1.255597 1.252527-2.481518 2.534729-3.676739 3.845585-17.704221 19.423375-28.517497 45.235251-28.575826 73.583902-0.013303 6.232958 0.502443 12.343119 1.490957 18.293645 3.312442 19.970844 12.024871 38.117133 24.593118 52.892651 1.86958 2.197038 3.818979 4.325515 5.853311 6.368034 8.785084 8.819876 14.866592 20.318768 16.947997 33.157167 0.523933 3.233648 0.806365 6.547113 0.798179 9.930163C968.255395 802.24443 931.626149 809.611212 920.302243 809.611212z" fill="#707070" p-id="10756"></path></svg>
                            </p>
                            <span class="recharge-nav-name">{{$t('coupon')}}</span>
                        </li>
                    </ul>
                </div>
                <div class="recharge_content_right">
                    <RouterView />
                </div>
            </div>
        </div>
        <div class="footer">
            <Footer />
        </div>

        <div v-if="isShowLoginStore.isShowLogin">
            <Login :isShowLogin_fn="isShowLogin_fn"/>
        </div>
    </div>
</template>

<script setup>
import Header from "@/components/Header/index.vue"  //头部
import Footer from "@/components/Footer/index.vue"  //底部
import Login from "@/components/Login/index.vue"
import {useIsShowLogin} from "@/store/modules/isShowLogin/index.js"
import { ref } from 'vue'
const isShowLoginStore = useIsShowLogin();

let lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}
</script>

<style lang="less" scoped>
.banner {
    width: 100%;
    display: flex;
    height: 100px;
    align-items: center;
    background-image: url();

    .pay-center-top-content-left {
        width: 196px;
        height: 70px;
        // background: url(https://s1.hdslb.com/bfs/static/jinkela/pay-pc/assets/logo.png) no-repeat;
        background: url(../../assets/money_logo.png) no-repeat;
        background-size: cover;
        background-position: center;
        // cursor: pointer;
    }

    .pay-center-top-content-left_en {
        width: 196px;
        height: 70px;
        // background: url(https://s1.hdslb.com/bfs/static/jinkela/pay-pc/assets/logo.png) no-repeat;
        background: url(../../assets/money_logo_en.png) no-repeat;
        background-size: cover;
        background-position: center;
        // cursor: pointer;
    }

    .pay-center-top-content-right {
        width: 270px;
        height: 90px;
        // background: url(https://s1.hdslb.com/bfs/static/jinkela/pay-pc/assets/banner_img.png) no-repeat;
        background: url(../../assets/banner6.png) no-repeat;
        background-size: contain;
        background-position: center;
    }
}

.recharge_content {
    display: flex;
    overflow: hidden;
    width: 1000px;
    height: 100%;
    margin: 20px auto 100px;
    border: 1px solid #e1e2e5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .14);
    background: #fafafa;
    border-radius: 4px;

    .recharge_content_left {
        float: left;
        width: 200px;
        height: 500px;
        overflow: hidden;

        .recharge-title {
            border-bottom: 1px solid #e1e2e5;
            display: block;
            // width: 140px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            color: #99a2aa;
            cursor: default;
        }
        .recharge-list{
            // width: 140px;
            height: 48px;
            line-height: 48px;
            list-style: none;
            display: flex;
            align-items: center;
            cursor: pointer;
            .recharge-nav-name{
                color: #222;
                margin-left: 12px;
                font-size: 13px;
                line-height: 20px;
            }
            p{
                flex: 1;
                text-align: center;
                svg{
                    position: relative;
                    top: 5px;
                    left: 10px;
                }
            }
            span{
                flex: 3;
                margin: initial !important;
                position: relative;
                left: 10px;
            }
        }
        .recharge-list:hover{
            background-color: #dadada;
        }
        .active{
            background-color: #dadada;
        }
    }

    .recharge_content_right {
        // float: left;
        // width: 799px;
        flex: 1;
        border-left: 1px solid #ddd;
        background: #fff;
    }
}
</style>